<template>
  <div>
    <detail-header></detail-header>
    <div class="banner">
      <img class="banner-img"
           :src="emp.icon">
    </div>
    <div class="content">
      <div class="item left">
        <h2>{{emp.Ename}}</h2>
        <p>{{emp.Eno}}</p>
        <p>{{emp.Eage}}</p>
        <p>{{emp.dept ? emp.dept.Dname : ''}}</p>
      </div>
      <div class="item">
        <div class="gap">详细信息</div>
        <p v-html="emp.desc"></p>
        <p v-show="! emp.desc">暂无</p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import DetailHeader from './components/detailHeader'

  export default {
    name: "detail",
    components: {
      DetailHeader,
    },
    data() {
      return {
        emp: []
      }
    },
    mounted() {
      axios.get('/api/emplist/detail/id/'+this.$route.params.id)
        .then((res) => {
          console.log(res)
          this.emp = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
</script>

<style lang="stylus" scoped>
  .banner
    .banner-img
      height 5rem
  .content
    margin-top .4rem
    .item
      padding 10px 0
    .left
      text-align left
      padding-left .4rem
    h2
      padding-bottom 10px
      font-size: .533333rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    p
      font-size: .3rem;
      color: #666;
      padding-bottom 10px
    .gap
      line-height: 0.8rem;
      background: #eee;
      margin-bottom: .1rem;
</style>
